<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑器</title>
    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="css/assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/assets/css/font-awesome.min.css" />

    <!-- page specific plugin styles -->
    <link rel="stylesheet" href="css/assets/css/jquery-ui.custom.min.css" />

    <!-- text fonts -->
    <link rel="stylesheet" href="css/assets/css/ace-fonts.css" />

    <!-- ace styles -->
    <link rel="stylesheet" href="css/assets/css/ace.min.css" id="main-ace-style" />

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="css/assets/css/ace-part2.min.css" />
    <![endif]-->
    <link rel="stylesheet" href="css/assets/css/ace-skins.min.css" />
    <link rel="stylesheet" href="css/assets/css/ace-rtl.min.css" />

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="css/assets/css/ace-ie.min.css" />
    <![endif]-->

    <!-- ace 设置处理程序 -->
    <script src="css/assets/js/ace-extra.min.js"></script>

    <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

    <!--[if lte IE 8]>
    <script src="css/assets/js/html5shiv.min.js"></script>
    <script src="css/assets/js/respond.min.js"></script>
    <![endif]-->
    <!--[if !IE]> -->
    <script type="text/javascript">
        window.jQuery || document.write("<script src='css/assets/js/jquery.min.js'>"+"<"+"/script>");
    </script>
    <!-- <![endif]-->
    <!--[if IE]>
    <script type="text/javascript">
        window.jQuery || document.write("<script src='css/assets/js/jquery1x.min.js'>"+"<"+"/script>");
    </script>
    <![endif]-->

    <script src="css/assets/js/bootstrap.min.js"></script>
    <!-- page specific plugin scripts -->
    <script src="css/assets/js/jquery-ui.custom.min.js"></script>
    <!--<script src="css/assets/js/jquery.ui.touch-punch.min.js"></script>-->
    <script src="css/assets/js/markdown/markdown.min.js"></script>
    <script src="css/assets/js/markdown/bootstrap-markdown.min.js"></script>
    <script src="css/assets/js/jquery.hotkeys.min.js"></script>
    <script src="css/assets/js/bootstrap-wysiwyg.min.js"></script>
    <script src="css/assets/js/bootbox.min.js"></script>

    <!-- ace scripts -->
    <script src="css/assets/js/ace-elements.min.js"></script>
    <script src="css/assets/js/ace.min.js"></script>
    <script type="text/javascript">
        jQuery(function($){
            function showErrorAlert (reason, detail) {
                var msg='';
                if (reason==='unsupported-file-type') { msg = "Unsupported format " +detail; }
                else {
                }
                $('<div class="alert"> <button type="button" class="close" data-dismiss="alert">&times;</button>'+
                        '<strong>File upload error</strong> '+msg+' </div>').prependTo('#alerts');
            }

            //我们想要为第三种样式改变一些按钮颜色
            $('#editor1').ace_wysiwyg({
                toolbar:
                        [
                            'font',
                            null,
                            'fontSize',
                            null,
                            {name:'bold', className:'btn-info'},
                            {name:'italic', className:'btn-info'},
                            {name:'strikethrough', className:'btn-info'},
                            {name:'underline', className:'btn-info'},
                            null,
                            {name:'insertunorderedlist', className:'btn-success'},
                            {name:'insertorderedlist', className:'btn-success'},
                            {name:'outdent', className:'btn-purple'},
                            {name:'indent', className:'btn-purple'},
                            null,
                            {name:'justifyleft', className:'btn-primary'},
                            {name:'justifycenter', className:'btn-primary'},
                            {name:'justifyright', className:'btn-primary'},
                            {name:'justifyfull', className:'btn-inverse'},
                            null,
                            {name:'createLink', className:'btn-pink'},
                            {name:'unlink', className:'btn-pink'},
                            null,
                            {name:'insertImage', className:'btn-success'},
                            null,
                            'foreColor',
                            null,
                            {name:'undo', className:'btn-grey'},
                            {name:'redo', className:'btn-grey'}
                        ],
                'wysiwyg': {
                    fileUploadError: showErrorAlert
                }
            }).prev().addClass('wysiwyg-style2');


            $('#editor2').css({'height':'200px'}).ace_wysiwyg({
                toolbar_place: function(toolbar) {
                    return $(this).closest('.widget-box')
                            .find('.widget-header').prepend(toolbar)
                            .find('.wysiwyg-toolbar').addClass('inline');
                },
                toolbar:
                        [
                            'bold',
                            {name:'italic' , title:'Change Title!', icon: 'ace-icon fa fa-leaf'},
                            'strikethrough',
                            null,
                            'insertunorderedlist',
                            'insertorderedlist',
                            null,
                            'justifyleft',
                            'justifycenter',
                            'justifyright'
                        ],
                speech_button: false
            });

//            样式选择
            $('[data-toggle="buttons"] .btn').on('click', function(e){
                var target = $(this).find('input[type=radio]');
                var which = parseInt(target.val());
                var toolbar = $('#editor1').prev().get(0);
                if(which >= 1 && which <= 4) {
                    toolbar.className = toolbar.className.replace(/wysiwyg\-style(1|2)/g , '');
                    if(which == 1) $(toolbar).addClass('wysiwyg-style1');
                    else if(which == 2) $(toolbar).addClass('wysiwyg-style2');
                    if(which == 4) {
                        $(toolbar).find('.btn-group > .btn').addClass('btn-white btn-round');
                    } else $(toolbar).find('.btn-group > .btn-white').removeClass('btn-white btn-round');
                }
            });

            //RESIZE IMAGE

            //为Chrome和Safari添加图像调整功能
            //当内容可编辑时，webkit浏览器没有图像调整功能
            //让我们添加一些jQuery UI可调整的内容
            //另一个选项是打开一个用户进入维度的对话框。
            if ( typeof jQuery.ui !== 'undefined' && ace.vars['webkit'] ) {

                var lastResizableImg = null;
                function destroyResizable() {
                    if(lastResizableImg == null) return;
                    lastResizableImg.resizable( "destroy" );
                    lastResizableImg.removeData('resizable');
                    lastResizableImg = null;
                }

                var enableImageResize = function() {
                    $('.wysiwyg-editor')
                            .on('mousedown', function(e) {
                                var target = $(e.target);
                                if( e.target instanceof HTMLImageElement ) {
                                    if( !target.data('resizable') ) {
                                        target.resizable({
                                            aspectRatio: e.target.width / e.target.height,
                                        });
                                        target.data('resizable', true);

                                        if( lastResizableImg != null ) {
                                            //禁用前可调整大小的图像
                                            lastResizableImg.resizable( "destroy" );
                                            lastResizableImg.removeData('resizable');
                                        }
                                        lastResizableImg = target;
                                    }
                                }
                            })
                            .on('click', function(e) {
                                if( lastResizableImg != null && !(e.target instanceof HTMLImageElement) ) {
                                    destroyResizable();
                                }
                            })
                            .on('keydown', function() {
                                destroyResizable();
                            });
                }

                enableImageResize();

            }
        })
    </script>
</head>
<body class="no-skin" style="background: #fff;margin: 20px;">
<div class="row">
    <div class="col-xs-12">
        <!--轻量级的编辑器-S-->
        <h4 class="header green clearfix">
            Bootstrap轻量级的编辑器
                <span class="block pull-right">
                    <small class="grey middle">Choose style: &nbsp;</small>
                    <span class="btn-toolbar inline middle no-margin">
                        <span data-toggle="buttons" class="btn-group no-margin">
                            <label class="btn btn-sm btn-yellow">
                                1
                                <input type="radio" value="1" />
                            </label>

                            <label class="btn btn-sm btn-yellow active">
                                2
                                <input type="radio" value="2" />
                            </label>

                            <label class="btn btn-sm btn-yellow">
                                3
                                <input type="radio" value="3" />
                            </label>

                            <label class="btn btn-sm btn-yellow">
                                4
                                <input type="radio" value="4" />
                            </label>
                        </span>
                    </span>
                </span>
        </h4>
        <div class="wysiwyg-editor" id="editor1"></div>
        <!--轻量级的编辑器-E-->
        <div class="hr hr-double dotted"></div>

        <!--row-S-->
        <div class="row">
            <div class="col-sm-5">
                <h4 class="header blue">Inside Widget</h4>

                <div class="widget-box widget-color-green">
                    <div class="widget-header widget-header-small">  </div>

                    <div class="widget-body">
                        <div class="widget-main no-padding">
                            <div class="wysiwyg-editor" id="editor2"></div>
                        </div>

                        <div class="widget-toolbox padding-4 clearfix">
                            <div class="btn-group pull-left">
                                <button class="btn btn-sm btn-default btn-white btn-round">
                                    <i class="ace-icon fa fa-times bigger-125"></i>
                                    Cancel
                                </button>
                            </div>

                            <div class="btn-group pull-right">
                                <button class="btn btn-sm btn-danger btn-white btn-round">
                                    <i class="ace-icon fa fa-floppy-o bigger-125"></i>
                                    Save
                                </button>

                                <button class="btn btn-sm btn-success btn-white btn-round">
                                    <i class="ace-icon fa fa-globe bigger-125"></i>

                                    Publish
                                    <i class="ace-icon fa fa-arrow-right icon-on-right bigger-125"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-7">
                <h4 class="header green">Markdown Editor</h4>

                <div class="widget-box widget-color-blue">
                    <div class="widget-header widget-header-small">  </div>

                    <div class="widget-body">
                        <div class="widget-main no-padding">
													<textarea name="content" data-provide="markdown" data-iconlibrary="fa" rows="10">**Markdown Editor** inside a *widget box*

- list item 1
- list item 2
- list item 3</textarea>
                        </div>

                        <div class="widget-toolbox padding-4 clearfix">
                            <div class="btn-group pull-left">
                                <button class="btn btn-sm btn-info">
                                    <i class="ace-icon fa fa-times bigger-125"></i>
                                    Cancel
                                </button>
                            </div>

                            <div class="btn-group pull-right">
                                <button class="btn btn-sm btn-purple">
                                    <i class="ace-icon fa fa-floppy-o bigger-125"></i>
                                    Save
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--row-E-->

    </div>
</div>
</body>
</html>